What is IndexedDB and how is it different from localStorage?

Question

ICSM Computer · Answer

IndexedDB and localStorage are both client-side storage solutions in the browser, but they serve different purposes and are fundamentally different in capability, structure, and use cases.
What is IndexedDB?
IndexedDB is a low-level API for storing large amounts of
structured data (objects, arrays, blobs) directly in the browser. It’s
asynchronous, supports indexes, and can handle 
complex queries and transactions.
It is ideal for:
Offline appsStoring JSON objects or binary dataSync queuesProgressive Web Apps (PWAs)
IndexedDB vs localStorage — Comparison Table
Feature
IndexedDB
localStorage
Data type
Stores objects, arrays, blobs, files
Only stores strings
Size limit
~50MB or more (browser-dependent)
~5MB per origin
Async / Sync
Asynchronous (non-blocking)
Synchronous (blocking)
Structure
Hierarchical: DB → Object Stores → Records
Flat key-value store
Indexing
Yes, can create indexes on properties
No indexing
Transactions
Yes, supports transactions
No
Binary data
Can store Blobs and Files
Not supported
Performance
Fast and optimized for larger data
OK for very small data only
Use case
Offline-first apps, PWA sync, queues, etc.
Simple key-value config (e.g. theme)
Example Use Cases
localStorage
localStorage.setItem("username", "john123");
console.log(localStorage.getItem("username")); // "john123"
Use for:
Dark mode settingUser's language preference
IndexedDB
const request = indexedDB.open("UserDB", 1);
request.onupgradeneeded = (e) =andgt; {
  const db = e.target.result;
  db.createObjectStore("users", { keyPath: "id" });
};
request.onsuccess = () =andgt; {
  const db = request.result;
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");
  store.add({ id: 1, name: "John", age: 30 });
};
Use for:
Caching API responsesQueueing offline form submissionsStoring user profile objects
Key Takeaways
Use IndexedDB for large, structured, or relational data.Use localStorage for tiny, simple config-like string data.Avoid localStorage for performance-critical or offline-first apps.

interview

What is IndexedDB and how is it different from localStorage?

ICSM Computer

Can you answer this question?

1 Answers

What is IndexedDB?

IndexedDB vs localStorage — Comparison Table

Example Use Cases

localStorage

IndexedDB

Key Takeaways

Liked By

Feature	`IndexedDB`	`localStorage`
Data type	Stores objects, arrays, blobs, files	Only stores strings
Size limit	~50MB or more (browser-dependent)	~5MB per origin
Async / Sync	Asynchronous (non-blocking)	Synchronous (blocking)
Structure	Hierarchical: DB → Object Stores → Records	Flat key-value store
Indexing	Yes, can create indexes on properties	No indexing
Transactions	Yes, supports transactions	No
Binary data	Can store Blobs and Files	Not supported
Performance	Fast and optimized for larger data	OK for very small data only
Use case	Offline-first apps, PWA sync, queues, etc.	Simple key-value config (e.g. theme)